<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>task04</title>
	<style type="text/css">
		#div1{
			height: 30px;
		}
		#div2{
			height:50px;
			margin-top: 10px;
		}
		.block{
			display: inline-block;
			width: 50px;
			height: 50px;
			background: red;
			color: #fff;
			text-align: center;
			line-height: 50px;
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<div id="div1">
		<input type="text" id="input">
		<button id="btn1">左侧入</button>
		<button id="btn2">右侧入</button>&nbsp;&nbsp;&nbsp;
		<button id="btn3">左侧出</button>
		<button id="btn4">右侧出</button>
	</div>
	<div id="div2">
        <span class="block">10</span>
        <span class="block">3</span>
        <span class="block">7</span>
        <span class="block">12</span>
        <span class="block">11</span>
        <span class="block">30</span>
	</div>
</body>
<script type="text/javascript">
	function sildeInLeft(){
		var input = document.getElementById("input");
		//var btn = document.getElementById("btn1");
		var span = document.createElement('span');
		var div2 = document.getElementById('div2');

		span.innerHTML = input.value;
		span.className = "block";
		div2.insertBefore(span,div2.firstChild);
	}

	function sildeInRight(){
		var input = document.getElementById("input");
		//var btn = document.getElementById("btn1");
		var span = document.createElement('span');
		var div2 = document.getElementById('div2');

		span.innerHTML = input.value;
		span.className = "block";
		div2.appendChild(span);
	}

	function slideOutLeft(){
		var span = document.getElementsByTagName('span');
		var div2 = document.getElementById('div2');
		var content = span[0].innerHTML;
		div2.removeChild(span[0]);
		alert(content);
	}
	function slideOutRight(){
		var span = document.getElementsByTagName('span');
		var div2 = document.getElementById('div2');
		var length = span.length;
		var content = span[length-1].innerHTML;
		div2.removeChild(span[length-1]);
		alert(content);
	}

	function init(){
		var btn1 = document.getElementById("btn1");
		var btn2 = document.getElementById("btn2");
		var btn3 = document.getElementById("btn3");
		var btn4 = document.getElementById("btn4");
		var span = document.getElementsByTagName("span");
	
		/*span.onclick = function(){
			this.hide();
		}*/
		btn1.onclick=function(){
			sildeInLeft();
			span = document.getElementsByTagName("span");
			for(var i=0;i<span.length;i++){
			span[i].onclick = function(){
				this.remove();
			}
		}
		}
		btn2.onclick=function(){
			sildeInRight();
			span = document.getElementsByTagName("span");
			for(var i=0;i<span.length;i++){
			span[i].onclick = function(){
				this.remove();
			}
		}
		}
		btn3.onclick=function(){
			slideOutLeft();
			span = document.getElementsByTagName("span");
			for(var i=0;i<span.length;i++){
			span[i].onclick = function(){
				this.remove();
			}
		}
		}
		btn4.onclick=function(){
			 slideOutRight();
			 span = document.getElementsByTagName("span");
			 for(var i=0;i<span.length;i++){
			span[i].onclick = function(){
				this.remove();
			}
		}
		}
		
	}

	init();

</script>
</html>